<template>
  <div id="wrapper">
    <navigation></navigation>
    <div id="page-wrapper">
      <div class="row container-fluid">
        <div class="col-md-1 btn-group openssh-btn">
          <button type="button" class="btn btn-success" @click="createUser" data-toggle="modal"
                  data-whatever="@getbootstrap">创建新用户
          </button>
        </div>
        <div class="modal fade" id="createUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="createHostLabel">创建设备</h4>
                <form @submit.prevent="submit">
                  <input type="hidden" v-model="user.id" id="id"/>
                  <div class="form-group">
                    <label for="username">用户名</label>
                    <input class="form-control" v-model="user.username" id="username" placeholder="用户名">
                  </div>
                  <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" v-model="user.password" id="password"
                           placeholder="输入密码">
                  </div>
                  <div class="form-group">
                    <label for="re_password">再次输入密码</label>
                    <input type="password" class="form-control" v-model="user.re_password" id="re_password"
                           placeholder="再次输入密码">
                  </div>
                  <div class="form-group">
                    <label for="is_superuser">是否是超级用户</label>
                    <input type="checkbox" class="form-control" id="is_superuser" v-model="user.is_superuser"
                           placeholder="超级权限">
                  </div>
                  <div class="modal-footer">
                    <input type="button" class="btn btn-primary" @click="submit" value="提交">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade" id="managerHost" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="managerHostLabel">选择设备</h4>
                <form @submit.prevent="submitHost">
                  <input type="hidden" v-model="user.id" name="id"/>
                  <div class="form-group" v-for="host in getHostlist" :key="host.id">
                    <label class="checkbox-inline">
                      <input type="checkbox" v-model="hosts"  :value=host> {{host.ip}}|{{host.name}}
                    </label>
                  </div>
                  <div class="modal-footer">
                    <input type="button" class="btn btn-primary" @click="submitHost" value="提交">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <table width="100%"
               class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline col-md-12"
               id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
          <thead>
          <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending"
                style="width: 284px;">用户名
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Browser: activate to sort column ascending" style="width: 340px;">是否超级用户
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Browser: activate to sort column ascending" style="width: 340px;">操作
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="gradeA even" role="row" v-for="user in getUserIndex" :key="user.id">
            <td class="sorting_1">{{ user.username }}</td>
            <td>{{ user.is_superuser }}</td>
            <td><a @click="updateForm(user)">修改</a>|<a @click="del(user.id)">删除</a>|<a @click="managerHost(user)">配置设备</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import api from '../api/user'

  function selectModal(state) {
    $('#createUser').modal(state)
  }
  function selectHostModal(state) {
    $('#managerHost').modal(state)
  }

  var model = {
    username: '',
    password: '',
    is_superuser: false,
    re_password: '',
    hosts: []
  };
  export default {
    name: 'User',
    data() {
      return {
        user: model,
        hosts: []
      }
    },
    created() {
      this.$store.dispatch('getIndexUser');
      this.$store.dispatch('getIndexHosts');
    },
    computed: {
      ...mapGetters({
        getUserIndex: 'allUsersList',
        getHostlist: 'allHostsList'
      })
    },
    methods: {
      managerHost:function(user){
        this.user = user;
        selectHostModal("show")
      },
      createUser: function () {
        this.user = model;
        selectModal('show')
      },
      updateForm(user) {
        this.user = user;
        this.user.password = null;
        selectModal("show");
      },
      del(id) {
        api.deleteUser(id)
        this.$store.dispatch("deleteUserUpdate", id)
      },
      submitHost(){
        let ids = [];
        for (let i = 0; i < this.hosts.length; ++i) {
          ids.push(this.hosts[i].id)
        }
        api.postUserAndHost({ids:ids,user_id:this.user.id},res=>{
          selectHostModal('hide')
        })
      },
      submit() {
        if (this.user.re_password != this.user.password) {
          alert("密码不一致")
          return
        }
        api.postUser(this.user, res => {
          this.$store.dispatch("createUserUpdate", res)
        })
        selectModal('hide')
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .openssh-btn {
    margin: 20px 0px;
  }
</style>
